<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/22 0022
  Time: 15:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务列表-闲时网</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../css/services/serviceList.css" type="text/css">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>
<%@ include file="../common/nav.jsp"%>


<div style="margin-top:10px;">


    <div style="float:left;width:25%;height:800px;margin-left:100px;">
        <div style="border: 1px solid grey;" id="left1">
            <div class="input-group" style="margin-top:30px;margin-left:20px;width: 90%">
                <input type="text" class="form-control" placeholder="聊天/游戏/动态">
                <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
            </div>



            <hr style="width: 90%">



            <div>
                <p style="font-size: 20px;">服务分类</p>

                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">全部服务</a>
                        </div>
                        <div class="collapse navbar-collapse" >
                            <ul class="nav navbar-nav" id="an">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        锻炼身体/出游陪玩<b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu"
                                        style="width: 350px;margin-left:100%;margin-top:-30%;">
                                        <li>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    全部<br>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">出游时间</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">跑步</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">出游地方</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">游泳</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">游戏路线</a>
                                                </div>
                                            </div>



                                        </li>


                                    </ul>

                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        照顾老人/接送小孩<b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu"
                                        style="width: 350px;margin-left:100%;margin-top:-30%;">
                                        <li>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    全部<br>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">接孩子放学</a>

                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">和老人谈心</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">教孩子学习</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">与老人散步</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">与孩子玩耍</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">看护老人</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">帮老人做饭</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">照顾儿童</a>
                                                </div>
                                            </div>


                                        </li>


                                    </ul>

                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        谈心聊天/网络游戏<b class="caret"></b>
                                    </a>

                                    <ul class="dropdown-menu"
                                        style="width: 350px;margin-left:100%;margin-top:-30%;">
                                        <li>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    全部
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">单价游戏</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">谈心方式</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">情感描述</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">网络游戏</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">谈心环境</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">代打游戏</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#"> 谈心时间</a>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="thumbnail" style="border:0px;">
                                                    <a href="#">游戏陪玩</a>
                                                </div>
                                            </div>


                                        </li>


                                    </ul>

                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>


                <hr style="width: 90%">


                <div>
                    <p style="font-size: 20px;">收费模式</p>
                    <nav class="navbar navbar-default" role="navigation">
                        <ul class="nav navbar-nav">
                            <%--<li><a href="#">全部</a></li>--%>
                            <li><a href="#">&nbsp;按时间</a></li>
                            <%--<li><a href="#">按项目</a></li>--%>
                        </ul>
                    </nav>
                </div>

            </div>

        </div>

        <div style="border:1px solid blue;margin-top:30px;">
            <p style="font-size: 20px;color:blue;margin:30px 0 0 20px;">为您排忧解难，是我们的责任</p>
            <p style="margin:20px 0 20px 20px;">发布需求苦服务太幸苦服务太幸苦服务<br>太幸苦服务太幸苦服务太幸苦</p>
            <p style="margin-left:50px;margin-bottom: 30px;"><button style="background-color: rgb(0, 132, 255);width:200px;height:50px;border:0px;" ><a href="../demand/demandRelease.jsp"style="color: white;">立即发布需求</a></button></p>
        </div>
    </div>



</div>

<!-- 右边 -->

<div id="right1" style="float: right;width:60%;height:800px;border:1px solid grey;margin-right:50px;">



    <div class="container-fulid" style="margin-top:10px;margin-left:5px;">
        <div class="row" >
            <div class="collapse navbar-collapse" id="example-navbar-collapse" >
                <ul class="nav navbar-nav navbar-auto" id="cen">
                    <li><a href="#" style="padding:10px;">默认</a></li>
                    <li><a href="#" style="padding:10px;">发布时间</a></li>
                    <li><a href="#" style="padding:10px;">成交次数</a></li>
                    <li><a href="#" style="padding:10px;">推荐人数</a></li>
                    <li><a href="#" style="padding:10px;">价格</a></li>
                    <li><a href="#" style="padding:10px;">更多</a></li>
                    <li><a href="#" style="padding:10px;"><input type="text" style="width:40px;height:20px;"></a></li>
                    <li style="padding:10px;">~</li>
                    <li><a href="#" style="padding:10px;"><input type="text" name="" id="" style="width:40px;height:20px;"></a></li>
                    <li><a href="#" style="padding-top:7px;"><button>确认</button></a></li>
                    <!-- <li><a href="#">所在地</li> -->
                </ul>
            </div>
        </div>
    </div>



    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="thumbnail">
            <a href="../services/serviceDetail.jsp"><img src="../imgs/touxiang.jpg" alt=""></a>
            <span style="font-size: 20px;">￥5.00</span><span>/个</span>
            <p>文案撰写服务，SEO文章，新闻稿，软文，宣传稿，通讯稿等稿件</p>
            <div style="overflow: hidden">
                <p style="float: left">name </p>
                <p style="float:right">city</p>
            </div>
        </div>
    </div>

    <div class="col-md-12">

        <ul class="pagination" style="padding-left: 30%;">
            <li><a href="#" style="border: 0px;"></a></li>
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>

    </div>


</div>

</div>
<div style="margin-top:850px;">
    <%@ include file="../common/footer.jsp"%>
</div>



<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<script src="../js/services/serviceList.js"></script>


</body>

</html>

